<template>
	<div class="from-pub">
		<el-form ref="form" label-width="120px">
			<el-form-item label="名称">
				<el-input v-model="name"></el-input>
			</el-form-item>
			<el-form-item label="类型">
				<el-select v-model="region" placeholder="请选择类型" style="width:100%;">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="日期">
				<el-col :span="11">
					<el-date-picker v-model="date1" type="date" placeholder="请选择日期" style="width: 100%">
					</el-date-picker>
				</el-col>
				<el-col class="line" :span="2">-</el-col>
				<el-col :span="11">
					<el-time-picker v-model="date2" placeholder="请选择时间" style="width: 100%"></el-time-picker>
				</el-col>
			</el-form-item>
			<el-form-item label="内容">
				<el-input v-model="desc" type="textarea"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">确认</el-button>
				<el-button>返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs
	} from 'vue'
	export default defineComponent({
		props: {
			options: {
				type: Array,
				default: ''
			}
		},
		// emits: ["onSubmit"],
		setup(props, context) {
			const data = reactive({
				name: '',
				region: '',
				date1: '',
				date2: '',
				desc: ''
			})
			const { options } = toRefs(props);

			const onSubmit = () => {
				console.log(props, context);
				context.emit("onSubmit", data);
			}

			return {
				...toRefs(data),
				options,
				onSubmit
			}
		}
	})
</script>

<style>
	.from-pub{
		width: 600px;
	}
</style>
